<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %}AWR 报告分析工具{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: "Inter", "Helvetica Neue", "Arial", "sans-serif";
      }
      .card {
        background-color: white;
        border-radius: 0.75rem;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
          0 2px 4px -2px rgb(0 0 0 / 0.1);
        transition: all 0.3s ease-in-out;
      }
      .table-auto th,
      .table-auto td {
        padding: 0.75rem;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
      }
      .table-auto th {
        background-color: #f9fafb;
        font-weight: 600;
      }
      h2 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e5e7eb;
        color: #1f2937;
      }
      .suggestion {
        background-color: #f0f9ff;
        border-left: 4px solid #0284c7;
        padding: 1rem;
        margin-top: 1rem;
        border-radius: 0.25rem;
      }
      .suggestion p {
        margin: 0;
        color: #0c4a6e;
      }
      .suggestion-title {
        font-weight: 600;
        color: #0369a1;
      }
      .kpi-card {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        padding: 1.5rem;
        border-radius: 0.5rem;
      }
      .kpi-title {
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 500;
      }
      .kpi-value {
        font-size: 1.875rem;
        font-weight: 700;
        color: #111827;
      }
    </style>
  </head>
  <body class="bg-gray-50 text-gray-800">
    <div class="container mx-auto p-4 md:p-8">
      {% block content %}{% endblock %}
    </div>

    <footer class="text-center p-4 mt-8 text-sm text-gray-500">
      <p>&copy; 2025 Python AWR 报告分析工具。由 Flask & Waitress 强力驱动。</p>
    </footer>
  </body>
</html>
